<template>
  <div id="desk2-1">
    <el-row>
      <el-col :span="18" :offset="3">
        <div id="div4" >
          <el-row>
            <el-col :span="12">
              <!-- 左侧图片-->
              <div id="div1">
                <el-image
                    style="width: 100%; height: 605px"
                    :src="photo1s"
                ></el-image></div>
            </el-col>
            <el-col :span="12">
              <!-- 右侧详情和功能-->
              <div id="div2">
                <div style="width: 605px;text-align: left" >
                  <h1 style="margin-top: 0px">{{photo1.commodityName}}</h1>
                </div>
                <div style="width: 605px;text-align: left ;margin-top: 20px;background-color: #d4d0d3;height: 30px" >
                  <span>价格:</span>
                  <span style="color: red"> {{photo1.commodityPrice}}</span>
                  <span>元</span>
                </div>
              <div style="width: 605px;text-align: left ;margin-top: 20px" >
                <span>商品分类:</span>
                <span style="color: #999999">{{photo1.categoryName}}</span>
              </div>
                <div style="width: 605px;text-align: left ;margin-top: 20px" >
                  <span>商品描述:</span>
                  <span style="color: #999999">{{photo1.commodityDesc}}</span>
                </div>
                <div style="width: 605px;text-align: left ;margin-top: 20px" >
                  <span>购买数量:</span>
                  <el-input-number v-model="num" @change="handleChange" :min="1" :max="999" label="描述文字"></el-input-number>
                </div>
                <div style="width: 605px;text-align: left ;margin-top: 20px" >
                  <el-button style="background-color: red;color: white" @click="click1">加入购物车</el-button>
                  <el-button style="background-color: #409EFF;color: white" @click="click2">直接购买</el-button>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <div v-for="p of photo2s" id="div3">
      <el-image
          style="width: 1000px; height: 1000px"
          :src="p.image"
      ></el-image> </div>
  </div>
</template>
<script>
export default {
  //商品id
  props:["id",],
  //单个商品的查询（全部里的）
  name: "desk2-1",

data(){
return{
      //单个商品的封面大图(数据不是单个字段，是3张表查出来的对象，下面的photo2s的字段数一样)
      photo1:{
      },
      photo1s:"",
      //单个商品的所有详情小图
      photo2s:[],
      from: [
        {quantity: 0,
        commodity: {},
        commodityPictureList: [
          {image: ""}
        ]}
      ],
      //数量
      num: 1,
      //账号id
      uid:0,
}
},
    methods:{
      //单个商品的封面大图
      selectOne1(){
        this.$axios.post(`Lbt/One1/${this.id}`).then(r=>{
            console.log("data1",r.data)
          let photo1=r.data[0]
          this.photo1=photo1
          this.photo1s=photo1.image
          console.log("this.photo1",this.photo1)
          // for(let i=0;i<r.data.length;i++){
          //   let photo1=r.data[0]
          //   this.photo1=photo1
          //   console.log("this.photo1",this.photo1)
          // }
})
    },
      //单个商品的所有详情小图
      selectOne2(){
        this.$axios.post(`Lbt/One2/${this.id}`).then(r=>{
          console.log("data2",r.data)
          this.photo2s=r.data;
          console.log("this.photo2",this.photo2s)
        })
      },
      //加入购物车
      click1(){
        console.log("this.$root.admin2", this.$root.admin2)
        if(this.$root.admin2 === null||this.$root.admin2===''||this.$root.admin2==='null'){
            alert("请先登账号再进行操作")
            this.$router.push("/Login")
          }else {
            this.uid=this.$root.uid
          console.log("this.$root.uid", this.uid)
          console.log("${this.id}",this.id)
          console.log("${this.num}",this.num)
          this.$axios.post(`ShoppingCart/${this.$root.uid}/${this.id}/${this.num}`).then((r=>{
            console.log("data",r.data)
           if(r.data==="success"){
            this.$message({
              type:"success",
              message:"加入购物车成功"
            });
           }else {
             this.$message({
               type:"error",
               message:"加入购物车失败"
             });
           }
          }))
          }

      },
      //直接购买
      click2(){
        if(this.$root.admin2 === null||this.$root.admin2===''||this.$root.admin2==='null'){
          alert("请先登账号再进行操作")
          this.$router.push("/Login")
        }else {
          this.from[0].commodityPictureList[0].image=this.photo1.image
          this.from[0].commodity.commodityName=this.photo1.commodityName
          this.from[0].commodity.commodityPrice=this.photo1.commodityPrice
          this.from[0].quantity=this.num

          console.log("this.from",this.from)
          // 路由跳转，跳转到订单确认页面
          this.$router.push({name:`CheckOut`,params:{cartList:this.from}})
        }


      },
      handleChange(value) {
        console.log(value);
      }
    },
  created() {
    this.selectOne1()
    this.selectOne2()
  }
}
</script>
<style scoped>
#div1{
  //border: red 2px solid;
}
#div2{
  //border: yellow 2px solid;
  height: 605px;
}
#div3{
  //border: blue 2px solid;
}
#div4{
  //border: black 2px solid;
  border-bottom: 2px solid #000;
}
</style>